<template>
    <div class="detailType">
        <div class="detail-news-container">
            <h2 class="detail-title">{{detailList.title}}</h2>
            <span class="time">{{detailList.pubdate}}</span>
            <!-- 出现音频 -->
            <div class="detail-music" v-if="Number(detailList.type) === 3" ref="musicWrapper">
                <audio ref="audio" :src="detailList.resourceurl" @canplay="ready" @timeupdate="updateTime" @ended="endMusic"></audio>
                <div class="left" @click.stop="playMusic">
                    <i class="music-icon"></i>
                    <van-circle :color="color" layer-color="#eee" v-model="currentRate" :rate="rate" :speed="100" />
                </div>
                <div class="right">
                    <h6 class="music-title">{{detailList.title}}</h6>
                    <span class="music-from">来源：{{detailList.source}}</span>
                </div>
            </div>
            <!-- 出现视频 -->
            <div class="detail-video" v-if="Number(detailList.type) === 2">
                <video :poster="detailList.coverimg" preload="auto" controls="controls" class="video-info" ref="video">
                    <source :src="detailList.resourceurl" type="video/mp4" />
                </video>
            </div>
            <!-- 主体内容 -->
            <div class="detail-content" v-html="detailList.content">
                
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data () {
            return {
                color: "#eee",
                currentRate: 0,
                rate: 0,
                detailList: {}
            }
        },
        methods: {
            // 播放音乐
            playMusic (e) {
                let musicIcon = e.target.parentNode.previousElementSibling
                let musicItem = e.target.parentNode.parentNode.previousElementSibling
                var audios = this.$refs.audio
                // 播放选中的音乐
                if (musicItem.paused) {
                    musicItem.play()
                    musicIcon.setAttribute("class","music-icon active")
                } else {
                    musicItem.pause()
                    musicIcon.setAttribute("class","music-icon")
                }
            },
            ready (e) {
                this.rate = 0
                this.color = "#0094d4"
            },
            updateTime (e) {
                this.rate = e.target.currentTime / e.target.duration *100
            },
            endMusic (e) {
                e.target.nextElementSibling.firstElementChild.setAttribute("class","music-icon")
            },
            getDetailInfo () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=ndetail&id='+this.$route.params.id).then((res) => {
                    this.detailList = res.data
                    console.log(this.detailList)
                })
            },
            //时间戳转换
            format(interval) {
                interval = interval | 0;
                const minute = this._pad(interval / 60 | 0);
                const second = this._pad(interval % 60);
                return `${minute}:${second}`;
            }
        },
        created () {
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .detail-content >>> img
        width: 100%
        display: block
    .detail-music >>> .van-circle
        width: 60px !important
        height: 60px !important
        position: absolute
        left: 5px
        top: 5px

    .detailType
        width: 100%
        height: 100%
        position: relative
        background: #fff
        padding-top: 20px
        .detail-news-container
            padding: 0 15px 120px 15px
            box-sizing: border-box
            width: 100%
            oveflow: hidden
            background: #fff
            .detail-title
                font-size: 18px
                font-weight: 700
                width: 100%
                text-align: center
                line-height: 130%
            .time
                font-size: 12px
                color: #888
                display: block
                width: 100%
                text-align: center
                margin: 10px 0 10px
            .detail-video
                width: 100%
                margin-top: 6px
                margin-bottom: 14px
                .video-info
                    width: 100%
                    object-fit: fill
                    height: 180px
            .detail-music
                width: 100%
                height: 70px
                border: 1px solid #eaeaea
                margin-top: 6px
                margin-bottom: 14px
                display: flex
                align-items: center
                .left
                    flex: 0 0 70px
                    width: 70px
                    position: relative
                    overflow: hidden
                    height: 70px
                    .music-icon
                        background: url('./music-icon.png') no-repeat
                        width: 38px
                        height: 38px
                        background-size: 100% 100%
                        display: block
                        margin: 16px auto
                        &.active
                            background: url('./music-pause-icon.png') no-repeat
                            background-size: 100% 100%
                            width: 28px
                            height: 28px
                            margin: 21px auto
                .right
                    flex: 1
                    padding-left: 20px
                    padding-right: 20px
                    box-sizing: border-box
                    .music-title
                        font-size: 16px
                        ellipsis()
                        color: #000
                    .music-from
                        font-size: 12px
                        color: #888
                        margin-top: 6px
                        display: block
            .detail-content
                width: 100%
                line-height: 150%
                font-size: 16px
                overflow: hidden
</style>